<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="100">
          <FormItem label="主题颜色">
            <PnColorPicker size="small" v-model="themeColor" alpha recommend/>
          </FormItem>
          <FormItem label="文本颜色">
            <PnColorPicker size="small" v-model="textColor" alpha recommend/>
          </FormItem>
          <FormItem label="行数">
            <InputNumber size="small" :max="1000000" :min="1" v-model="rowNum"></InputNumber>
          </FormItem>
          <FormItem label="轮播方式">
            <Select :transfer="true" size="small" v-model="carousel">
              <Option v-for="item in carousels" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="轮播时间间隔">
            <InputNumber size="small" :max="1000000" :min="1000" :step="1000" v-model="waitTime"></InputNumber> ms
          </FormItem>
          <FormItem label="是否自动排序">
            <i-switch v-model="sort">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="单位后缀字符">
            <Input size="small" v-model="unit" placeholder=""/>
          </FormItem>
        </Form>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="RollRankingListComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'RollRankingListCompForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {
        carousels: [
          {
            label: '单行滚动',
            value: 'single'
          },
          {
            label: '整页滚动',
            value: 'page'
          },
        ],
      }
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        rowNum: 'component.compConfigData.rowNum',
        waitTime: 'component.compConfigData.waitTime',
        carousel: 'component.compConfigData.carousel',
        unit: 'component.compConfigData.unit',
        sort: 'component.compConfigData.sort',
        themeColor: 'component.compConfigData.themeColor',
        textColor: 'component.compConfigData.textColor',

      })
    }
  }
</script>

<style scoped>

</style>
